<template>
  <div>
    <div style="margin-bottom: 10px;">
      <el-input style="width:200px" placeholder="查询申请人" v-model="username"></el-input>
      <el-input style="width:200px ; margin:0 5px" placeholder="查询项目名称" v-model="projectName"></el-input>
      <el-button type="primary" @click="load(1)">查询</el-button>
      <el-button type="info" @click="reset">重置</el-button>
    </div>
    <el-table :data="tableData" stripe :header-cell-style="{backgroundColor: 'aliceblue',color:'#666'}" >
      <el-table-column prop="id" label="项目 ID" width="70"></el-table-column>
      <el-table-column prop="username" label="申请人"></el-table-column>
      <el-table-column prop="projectName" label="项目名"></el-table-column>
      <el-table-column prop="projectType" label="项目类型"></el-table-column>
      <el-table-column prop="supervisor" label="指导老师"></el-table-column>
      <el-table-column prop="reviewer" label="评审专家"></el-table-column>
      <el-table-column label="项目概述" width="100">
        <template #default="{ row }">
          <!-- 使用按钮触发Popover -->
          <el-popover
              placement="top-start"
              width="400"
              trigger="click"
              :content="row.projectOverview">
          <!-- 通过按钮触发 -->
          <template #reference>
            <el-button
                size="small"
                class="trigger-btn"
                @click.stop>           <!-- 阻止事件冒泡 -->
            查看详情            <!-- 按钮文字 -->
            </el-button>
          </template>
          </el-popover>
          <!-- 保留带省略号的文字展示（可选） -->
          <div
              class="text-ellipsis"
              style="margin-top: 4px; font-size: 12px; color: #666;"
          >
          </div>
        </template>
      </el-table-column>
      <el-table-column label="团队介绍" width="100">
        <template #default="{row}">
          <el-popover
              placement="top-start"
              width="400"
              trigger="hover"
              :content="row.teamIntroduction">
            <template #reference>
              <div class="text-ellipsis">{{ row.teamIntroduction }}</div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="计划书" width="120">
        <template #default="{row}">
          <el-link
              :href="row.businessPlan"
              target="_blank"
              type="primary"
          >
            下载查看
          </el-link>
        </template>
      </el-table-column>
      <el-table-column prop="contactEmail" label="邮箱"></el-table-column>
      <el-table-column prop="state" label="审核状态">
        <template v-slot="scope">
          <span>{{ getStateLabel(scope.row.state) }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column prop="createdAt" label="创建时间"></el-table-column>-->
<!--      <el-table-column prop="updatedAt" label="更新时间"></el-table-column>-->
      <el-table-column label="gitee仓库地址" width="120">
        <template #default="{row}">
          <el-link
              :href="row.gitRepo"
              target="_blank"
              type="primary"
          >
            去往仓库
          </el-link>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="180px">
        <template v-slot="scope">
          <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)" v-if="user.role === '管理员' ">编辑</el-button>
          <el-button size="mini" type="success" plain @click="audit(scope.row)" v-if="user.role === '指导老师'&& scope.row.state === '0' ">审核</el-button>
          <el-button size="mini" type="success" plain @click="showProgress(scope.row)" v-if="scope.row.state === '审核通过' ">进度查询</el-button>
          <el-button size="mini" type="danger" plain @click="del(scope.row.id)" v-if="user.role === '管理员' ">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px 0;">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
    <el-dialog title="审核" :visible.sync="auditVisible" width="40%">
      <!-- 合并为单个表单 -->
      <el-form
          :model="form"
          label-width="100px"
          :rules="rules"
          ref="formRef"
          style="padding-right: 20px;"
      >
        <!-- 项目信息字段 -->
        <el-form-item label="项目名" prop="projectName">
          <el-input v-model="form.projectName" placeholder="项目名称"></el-input>
        </el-form-item>

        <el-form-item label="项目类型" prop="projectType">
          <el-input v-model="form.projectType" placeholder="项目类型"></el-input>
        </el-form-item>

        <el-form-item label="指导老师" prop="supervisor">
          <el-input v-model="form.supervisor" placeholder="指导老师"></el-input>
        </el-form-item>

        <el-form-item label="评审专家" prop="reviewer">
          <el-input v-model="form.reviewer" placeholder="评审专家"></el-input>
        </el-form-item>

        <el-form-item label="项目概述" prop="projectOverview">
          <el-input type="textarea" v-model="form.projectOverview"></el-input>
        </el-form-item>

        <el-form-item label="团队介绍" prop="teamIntroduction">
          <el-input type="textarea" v-model="form.teamIntroduction"></el-input>
        </el-form-item>

        <el-form-item label="计划书" prop="businessPlan">
          <el-input type="textarea" v-model="form.businessPlan"></el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="contactEmail">
          <el-input v-model="form.contactEmail"></el-input>
        </el-form-item>

        <el-form-item label="Git仓库" prop="gitRepo">
          <el-input v-model="form.gitRepo"></el-input>
        </el-form-item>

        <!-- 审核状态 -->
        <el-form-item label="审核状态">
          <el-radio-group v-model="form.state">
            <el-radio label="1">审核通过</el-radio>
            <el-radio label="2">审核不通过</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 评审评价 -->
        <el-form-item label="评审评价" prop="reviewComment">
          <el-input
              type="textarea"
              v-model="form.reviewComment"
              placeholder="请输入详细评审意见"
              :rows="4"
              clearable
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="auditVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </el-dialog>
    <!-- 显示进度查询组件的对话框 -->
    <el-dialog title="项目进度查询" :visible.sync="progressVisible" width="80%">
      <tea-student-project-progress :projectData="selectedProjectData"></tea-student-project-progress>
      <div slot="footer" class="dialog-footer">
        <el-button @click="progressVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TeaStudentProjectProgress from "@/views/manager/TeaStudentProjectProgress.vue";
export default {
  data(){
    return{
      tableData:[],  //所有的数据
      pageNum:1,  //当前的页码
      pageSize:5, //每页显示个数
      username:'',
      projectName:'',
      total:0,
      fromVisible:false,
      auditVisible:false,
      progressVisible: false, // 控制进度查询对话框的显示
      selectedProjectData: null, // 传递给进度查询组件的项目数据
      form:{
        reviewComment:''
      },
      user:JSON.parse(localStorage.getItem('honey-user') ||('{}')),
      rules: {
        project_name: [
          { required: true, message: '请输入项目名称', trigger: 'blur' },
        ],
      },
      ids:[]
    }
  },
  components: {
    TeaStudentProjectProgress
  },
  created(){
    this.load()
  },
  methods:{
    //查看git仓库
    openGitRepo(url) {
      if (url) {
        window.open(url, "_blank"); // 在新标签页打开链接
      } else {
        this.$message.warning("该项目暂无 Git 仓库地址");
      }
    },
    //判断审核状态
    getStateLabel(state) {
      switch (state) {
        case "1":
          return "审核通过";
        case "2":
          return "审核不通过";
        case "0":
          return "未审核";
        default:
          return "未知状态";
      }
    },
    showProgress(row) {
      this.selectedProjectData = row;
      this.progressVisible = true;
    },
    reset(){
      this.username =''
      this.projectName = ''
      this.load()
    },
    handleCurrentChange(pageNum){
      this.pageNum = pageNum
      this.load()
    },
    load(pageNum){  //分页查询   传入一个pageNum默认值1，每次查询后显示第一页的数据
      if(pageNum){
        this.pageNum = pageNum
      }
      this.$request.get('/project/selectList',{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,

          projectName: this.projectName,
        }
      }).then(res=>{
        this.tableData = res.data.records
        this.total=res.data.total
      })
    },
    save(){  //保存按钮触发逻辑 触发新增或更新
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 验证通过
          this.$request.post('/project/tg',this.form)
              .then(res=>{
            if(res.code ==='200'){    //表示成功保存
              this.$message.success('保存成功')
              this.load(1)
              //this.fromVisible = false
              this.auditVisible = false
            }else{
              this.$message.error(res.msg) //弹出错误信息
            }
          })
        }
      })
    },
    handleEdit(row){         //编辑数据
      this.form =JSON.parse(JSON.stringify(row))   //给form对象赋值 注意要深拷贝
      this.fromVisible =true
    },
    del(id){
      this.$confirm('您确认删除吗？','确认删除',{type: "warning"}).then(response=>{
        this.$request.delete('/teacher/delete/'+ id).then(res=>{
          if(res.code ==='200'){
            this.$message.success('操作成功')
            this.load(1)
          }else{
            this.$message.error(res.msg)
          }
        })

      }).catch(()=>{})
    },
    audit(row){
      this.form =JSON.parse(JSON.stringify(row))
      this.auditVisible=true
    }
  },
}
</script>

<style>

</style>